<template>
    <div class="ClassGoods">
        <div class="ClassGoodsView">
            <div class="ClassGoodsLeft">
                <div :class="['ClassLeftItem',current == index? 'current':'ClassLeftItem']" v-for="(item,index) in ClassList" :key="index">
                    <span>{{item.name}}</span>
                    <div class="ClassGoodsLeftLine"></div>
                </div>
            </div>
            <div class="ClassGoodsRight">
                <div class="ClassGoodsRightDiv">
                    <div class="ClassGoodsDivider">
                        <el-divider>地板砖</el-divider>
                    </div>
                    <div class="ClassGoodsRightView">
                        <div class="ClassGoodsRightItem" v-for="(item,index) in 4" :key="index">
                            <div class="ClassGoodsRightImage">
                                <img src="https://img.quanminyanxuan.com/other/21188f7a1e9340759c113aa569f96699.jpg?x-oss-process=image/resize,h_600,m_lfit" />
                            </div>
                            <div class="ClassGoodsRightMain">
                                <div class="TextAuto">免漆板衣橱柜打造安装柜打造安装</div>
                                <div class="ClassGoodsRightNum">已有1682人购买</div>
                                <div>
                                    <span class="ClassGoodsRightPirce"><span>¥</span>3140</span>
                                    <span class="ClassGoodsRightOldPirce">￥6146</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</template>

<script>
    export default {
        name: 'ClassGoods',
        props: ['data'],
        data() {
            return {
                list: {},
                ClassList: [
                    { name: '地板装' },
                    { name: '马可波罗' },
                    { name: '浴霸' },
                    { name: '大自然木门' },
                    { name: '适度家具' },
                ],
                current: 0
            }
        },
        mounted() {
            this.list = this.data
        }
    }
</script>

<style lang="less" scoped>
    .TextAuto {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
    }

    .ClassGoods {
        background: #fff;
        height: 610px;

        .ClassGoodsView {
            display: flex;
            align-items: flex-start;
            height: 100%;

            .ClassGoodsLeft {
                width: 30%;
                background: #f6f6f6;
                height: 100%;

                .ClassLeftItem {
                    width: 100%;
                    padding: 14px 12px;
                    /* background: #fff; */
                    font-size: 14px;
                    font-weight: 500;
                    color: #888888;
                    text-align: center;
                    position: relative;
                    overflow: hidden;

                    .ClassGoodsLeftLine {
                        width: 6px;
                        height: 20px;
                        background: #f6f6f6;
                        border-radius: 0px 2px 2px 0px;
                        position: absolute;
                        top: 50%;
                        left: 0;
                        transform: translate(-50%, -50%);
                    }
                }

                .current {
                    width: 100%;
                    padding: 14px 0;
                    background: #fff;
                    font-size: 14px;
                    font-weight: 500;
                    color: #D8B270;
                    text-align: center;
                    position: relative;
                    overflow: hidden;

                    .ClassGoodsLeftLine {
                        width: 6px;
                        height: 20px;
                        background: #D8B270;
                        border-radius: 0px 2px 2px 0px;
                        position: absolute;
                        top: 50%;
                        left: 0;
                        transform: translate(-50%, -50%);
                    }
                }
            }

            .ClassGoodsRight {
                padding: 0 20px 0 10px;
                background: #fff;
                width: 100%;
                height: 100%;

                .ClassGoodsRightDiv {
                    .ClassGoodsDivider {
                        padding: 0 40px;
                    }

                    .ClassGoodsRightView {
                        .ClassGoodsRightItem {
                            display: flex;
                            align-items: center;
                            margin-bottom: 12px;

                            .ClassGoodsRightImage {
                                height: 100px;
                                width: 100px;
                                overflow: hidden;
                                border-radius: 4px;

                                img {
                                    width: 100%;
                                    height: 100%;
                                }
                            }

                            .ClassGoodsRightMain {
                                flex: 1;
                                margin-left: 12px;

                                .TextAuto {
                                    font-size: 14px;
                                    font-weight: 500;
                                    color: #212121;
                                }

                                .ClassGoodsRightNum {
                                    margin: 8px 0 24px 0;
                                    padding: 5px 6px;
                                    background: rgba(207, 166, 128, .1);
                                    border-radius: 2px;
                                    font-size: 11px;
                                    font-weight: 500;
                                    color: #C68C57;
                                    width: max-content;
                                }

                                .ClassGoodsRightPirce {
                                    font-size: 18px;
                                    font-weight: bold;
                                    color: #F66036;
                                    margin-right: 8px;

                                    span {
                                        font-size: 11px;
                                        font-weight: bold;
                                        color: #F66036;
                                        margin-right: 5px;
                                    }
                                }

                                .ClassGoodsRightOldPirce {
                                    font-size: 12px;
                                    font-weight: 500;
                                    text-decoration: line-through;
                                    color: #929290;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
</style>